<template>
  <div v-loading="detailInfoShow">
    <div class="requestAdd" v-if="!selectionShow">
      <!-- 筛选按钮 -->
      <div class="search-button" v-if="!dtlShow">
        <el-button
          v-if="pageType === 'audit' && route.name === 'OutorderAudit'"
          class="btn save"
          @click="handleCheckBtn2(projectFormRef, 5, '同意')"
          ><el-icon class="icon" color="#fff"> <Tickets /> </el-icon
          >同意</el-button
        >
        <el-button
          v-if="pageType === 'audit' && route.name === 'OutorderAudit'"
          class="btn withdraw"
          @click="handleCheckBtn2(projectFormRef, 2, '拒绝')"
          ><el-icon class="icon" color="#fff"> <DocumentDelete /> </el-icon
          >拒绝</el-button
        >

        <el-button
          v-if="pageType === 'audit' && route.name === 'OutorderAudit'"
          class="btn withdraw"
          @click="handleCheckBtn2(projectFormRef, 4, '驳回')"
          ><el-icon class="icon" color="#fff"> <DocumentDelete /> </el-icon
          >驳回</el-button
        >

        <template v-if="checkStatus == 5">
          <el-button
            v-if="
              pageType === 'check' &&
              checkMaterialList.length > 0 &&
              route.name === 'OutorderAudit'
            "
            class="btn submit"
            v-preventReClick
            @click="handleScaveBtn(requestmaterialFormRef, formRefs, '保存')"
            ><el-icon class="icon" color="#fff"> <Tickets /> </el-icon
            >保存</el-button
          >
        </template>
        <el-button
          v-if="activeName == 'approval' && flowInfoList.length"
          @click="handleEvaluate()"
          class="btn save"
          ><el-icon class="icon" color="#fff"> <Comment /> </el-icon
          >评论</el-button
        >
        <el-button
          v-if="activeName == 'approval' && flowInfoList.length"
          @click="handlePrint()"
          v-print="prints"
          class="btn add"
          ><el-icon class="icon" color="#fff"> <Printer /> </el-icon
          >打印</el-button
        >
        <el-button class="btn direction" @click="handleBack"
          ><el-icon class="icon" color="#fff"> <Back /> </el-icon
          >返回</el-button
        >
      </div>
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="出库信息" name="info">
          <template v-slot:label>
            {{ route.name === "OutorderAudit" ? "申请信息" : "出库信息" }}
          </template>
          <el-collapse v-model="activeNames">
            <div v-if="outboundStatus">
              <!-- 基础信息 -->
              <el-collapse-item name="1" v-if="!dtlShow" class="transform-down">
                <template #title>
                  <span class="circle"></span>
                  <span class="collapse-title"
                    >{{
                      pageType !== "detail"
                        ? pageType === "check"
                          ? "审核"
                          : "编辑"
                        : ""
                    }}出库信息</span
                  >
                </template>
                <div class="request-info">
                  <el-form
                    :model="requestForm"
                    ref="requestFormRef"
                    label-width="100px"
                    v-enterToNext
                    :disabled="
                      pageType === 'detail' ||
                      pageType === 'check' ||
                      pageType === 'audit'
                    "
                  >
                    <el-row>
                      <el-col :span="6">
                        <el-form-item label="出库编号：">
                          <el-input
                            disabled
                            v-model="requestForm.deliveryApplyCode"
                            placeholder="自动获取"
                            clearable
                            style="width: 100%"
                            class="search-input"
                          />
                        </el-form-item>
                      </el-col>

                      <el-col :span="6">
                        <el-form-item label="申请日期：" prop="applicantDate">
                          <el-date-picker
                            v-model="requestForm.applicantDate"
                            format="YYYY/MM/DD HH:mm:ss"
                            style="width: 100%"
                            class="search-input"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            type="datetime"
                            placeholder="请选择"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="6">
                        <el-form-item label="申请人：" prop="applicantId">
                          <el-select
                            v-model="requestForm.applicantId"
                            placeholder="请选择"
                            clearable
                            style="width: 100%"
                            class="search-input"
                            @change="handleUserChange"
                          >
                            <el-option
                              v-for="dict in userList"
                              :key="dict.userId"
                              :label="dict.nickName"
                              :value="dict.userId"
                            />
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="6">
                        <el-form-item label="申请部门：" label-width="120px">
                          <el-input
                            disabled
                            style="width: 100%"
                            v-model="requestForm.deptName"
                            placeholder="自动获取"
                            clearable
                            class="search-input"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="6">
                        <el-form-item label="出库类型：">
                          <el-select
                            v-model="requestForm.deliveryType"
                            placeholder="请选择出库类型"
                            clearable
                            style="width: 100%"
                            class="search-input"
                          >
                            <el-option
                              v-for="dict in outStatusList"
                              :key="dict.value"
                              :label="dict.label"
                              :value="dict.value"
                            />
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="6">
                        <el-form-item label="用途类型：">
                          <el-select
                            v-model="requestForm.deliveryUsageType"
                            placeholder="请选择用途类型"
                            clearable
                            style="width: 100%"
                            class="search-input"
                          >
                            <el-option
                              v-for="dict in deliveryStatusList"
                              :key="dict.value"
                              :label="dict.label"
                              :value="dict.value"
                            />
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="6">
                        <el-form-item
                          label="最晚交付日期："
                          prop="latestDeliverDate"
                          label-width="140px"
                        >
                          <el-date-picker
                            v-model="requestForm.latestDeliverDate"
                            format="YYYY/MM/DD"
                            class="search-input"
                            value-format="YYYY-MM-DD"
                            type="date"
                            placeholder="请选择"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="关联请购单：">
                          <el-autocomplete
                            popper-class="autoclass"
                            v-model="requestForm.requestName"
                            :fetch-suggestions="querySearchRequest"
                            placeholder="请选择"
                            @select="handleRequestSelect"
                            style="width: 100%"
                            clearable
                          >
                            <template #default="{ item }">
                              <!-- <div class="auto-top"> -->
                              <div class="auto-top" style="display: flex">
                                <div style="display: flex; width: 140px">
                                  请购编号
                                </div>
                                <div class="auto-item">申请人</div>
                                <div class="auto-item">采购类型</div>
                                <div class="auto-item">关联项目</div>
                              </div>
                              <div style="display: flex; width: 500px">
                                <div
                                  class="auto-item"
                                  :title="item.purchaseApplyCode"
                                  style="display: flex; width: 170px"
                                >
                                  {{ item.purchaseApplyCode }}
                                </div>
                                <div
                                  class="auto-item"
                                  :title="item.applicantName"
                                >
                                  {{ item.applicantName }}
                                </div>
                                <div
                                  class="auto-item"
                                  :title="item.applicantTypeName"
                                >
                                  {{ item.applicantTypeName }}
                                </div>
                                <div class="auto-item" :title="item.remarks">
                                  {{ item.remarks }}
                                </div>
                              </div>
                            </template>
                          </el-autocomplete>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="关联项目：" label-width="140px">
                          <el-autocomplete
                            popper-class="autoclass"
                            v-model="requestForm.projectName"
                            :fetch-suggestions="querySearch"
                            placeholder="请选择"
                            @select="handleProjectSelect"
                            style="width: 100%"
                            clearable
                          >
                            <template #default="{ item }">
                              <!-- <div class="auto-top"> -->
                              <div class="auto-top" style="display: flex">
                                <div style="display: flex; width: 140px">
                                  项目编号
                                </div>
                                <div class="auto-item">项目名称</div>
                                <div class="auto-item">项目类别</div>
                                <div class="auto-item">项目类型</div>
                              </div>
                              <div style="display: flex; width: 500px">
                                <div
                                  class="auto-item"
                                  :title="item.projectCode"
                                  style="display: flex; width: 170px"
                                >
                                  {{ item.projectCode }}
                                </div>
                                <div
                                  class="auto-item"
                                  :title="item.projectName"
                                >
                                  {{ item.projectName }}
                                </div>
                                <div
                                  class="auto-item"
                                  :title="item.projectCategoryName"
                                >
                                  {{ item.projectCategoryName }}
                                </div>
                                <div
                                  class="auto-item"
                                  :title="item.projectTypeName"
                                >
                                  {{ item.projectTypeName }}
                                </div>
                              </div>
                            </template>
                          </el-autocomplete>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="关联运维工单：" label-width="110">
                          <el-input
                            style="width: 100%"
                            v-model="requestForm.workOrderName"
                            placeholder="请选择"
                            class="search-input"
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="备注：">
                          <el-input
                            maxlength="2000"
                            style="width: 100%"
                            v-model="requestForm.remarks"
                            placeholder=""
                            type="textarea"
                            clearable
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="6">
                        <el-form-item label="附件：" prop="businessLicense">
                          <!-- <Upload
                          :fileList="requestForm.fileList"
                          :isFull="true"
                          :showButton="true"
                          :isCanDelete="false"
                          accept=".doc,.docx,.pdf"
                          :limit="10"
                        @success="(result) => uploadSuccess(result)"
                        @deleteFile="(result) => uploadRemove(result)"
                        /> -->
                          <Upload
                            :fileList="requestForm.fileList"
                            :isFull="true"
                            :isCanDelete="false"
                            :disabled="true"
                            @success="(result) => uploadSuccess(result, 1)"
                            @deleteFile="(result) => uploadRemove(result, 1)"
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
              </el-collapse-item>
              <!-- 联系人列表 -->

              <el-collapse-item name="2" v-if="!dtlShow" class="transform-down">
                <template #title>
                  <span class="circle"></span>
                  <span class="collapse-title">收货地址</span>
                </template>
                <div class="request-info">
                  <el-form
                    :model="requestForm"
                    ref="requestFormRef"
                    label-width="100px"
                    v-enterToNext
                    :disabled="
                      pageType === 'detail' ||
                      pageType === 'check' ||
                      pageType === 'audit'
                    "
                  >
                    <el-row>
                      <el-col :span="8">
                        <el-form-item label="收货人：">
                          <el-input
                            v-model="requestForm.consignee"
                            placeholder=""
                            clearable
                            style="width: 100%"
                            class="search-input"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="手机号码：">
                          <el-input
                            v-model="requestForm.phone"
                            placeholder=""
                            clearable
                            style="width: 100%"
                            class="search-input"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="收货地址：">
                          <el-input
                            v-model="requestForm.deliveryAddress"
                            placeholder=""
                            clearable
                            style="width: 100%"
                            class="search-input"
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
              </el-collapse-item>

              <!-- 添加物料 -->
              <el-collapse-item
                name="3"
                style="position: relative"
                :class="!dtlShow ? 'transform-down' : ''"
              >
                <template #title>
                  <span class="circle"></span>
                  <span class="collapse-title">物料列表</span>
                  <div class="nofixed-search-button button-position">
                    <el-button
                      class="btn submit"
                      @click.stop="handleMaterial"
                      v-if="
                        pageType !== 'detail' && route.name !== 'OutorderAudit'
                      "
                      ><el-icon class="icon" color="#fff"> <Plus /> </el-icon
                      >选择物料</el-button
                    >
                    <el-button
                      v-if="
                        route.name === 'OutorderAudit' && pageType === 'detail'
                      "
                      style="width: 150px"
                      class="btn submit"
                      @click.stop="handleQrcode()"
                      >下载全部二维码</el-button
                    >
                  </div>
                </template>
                <div class="contact-info">
                  <!-- 表格数据 -->
                  <el-table
                    :data="requestForm.deliveryRelationMaterialList"
                    border
                    :height="'280px'"
                    :header-cell-style="{ 'text-align': 'center' }"
                    show-summary
                    sum-text="合计"
                    :summary-method="getSummaries"
                  >
                    <!-- 操作模式 -->
                    <el-table-column
                      label="操作"
                      align="center"
                      :show-overflow-tooltip="true"
                      width="100px"
                      v-if="checkStatus == 5 && pageType !== 'detail'"
                    >
                      <template #default="{ row, $index }">
                        <div
                          v-if="
                            row.deliveryStatus != 1 &&
                            row.deliveryQuantity != row.quantity
                          "
                          class="table-operate"
                        >
                          <el-button
                            style="background-color: #b0e0e6"
                            @click="handleOperate('outbound', row, $index)"
                            >出库</el-button
                          >
                        </div>
                        <div
                          v-if="
                            row.deliveryStatus != 1 &&
                            row.deliveryQuantity == row.quantity
                          "
                          class="table-operate"
                        >
                          <el-button style="background-color: #ccc" disabled
                            >已出库</el-button
                          >
                        </div>
                      </template></el-table-column
                    >

                    <el-table-column
                      v-if="
                        route.name === 'OutorderAudit' && pageType === 'detail'
                      "
                      label="主设备物资序列号"
                      prop="materialNumber"
                      :show-overflow-tooltip="true"
                      min-width="160"
                    >
                      <!-- <template #default="{ row, $index }">
                        <div class="table-operate">
                          <el-button @click="handleQrcode(row, $index)"
                            >查看</el-button
                          >
                        </div>
                      </template> -->
                    </el-table-column>
                    <el-table-column
                      label="序号"
                      type="index"
                      :show-overflow-tooltip="true"
                      min-width="160"
                    />
                    <el-table-column
                      v-if="
                        route.name === 'OutorderAudit' && pageType === 'detail'
                      "
                      label="生产厂商序列号"
                      prop="serialNumber"
                      :show-overflow-tooltip="true"
                      min-width="160"
                    />
                    <el-table-column
                      label="物料编号"
                      prop="materialCode"
                      :show-overflow-tooltip="true"
                      min-width="160"
                    >
                      <template #default="{ row }">
                        <span>{{
                          row.materialCode ? row.materialCode : "--"
                        }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="物料名称"
                      prop="materialName"
                      :show-overflow-tooltip="true"
                      min-width="160"
                    />
                    <el-table-column
                      label="出厂型号"
                      prop="factoryCode"
                      :show-overflow-tooltip="true"
                      min-width="160"
                    />
                    <el-table-column
                      label="技术参数"
                      prop="technologyParameter"
                      :show-overflow-tooltip="true"
                      min-width="160"
                    />
                    <el-table-column
                      label="单位"
                      prop="materialUnit"
                      :show-overflow-tooltip="true"
                      min-width="160"
                    />
                    <!-- <el-table-column
                      v-if="pageType == 'detail'"
                      label="出库数量"
                      prop="deliveryQuantity"
                      min-width="160"
                    >
                    </el-table-column> -->
                    <!--                   v-if="
                        pageType !== 'detail' && route.name == 'OutorderAudit'
                      " -->
                    <el-table-column
                      label="申请出库数量"
                      prop="deliveryQuantity"
                      min-width="160"
                    >
                    </el-table-column>
                    <!-- pageType !== 'detail' && -->
                    <el-table-column
                      v-if="route.name == 'OutorderAudit'"
                      label="已出库数量"
                      prop="quantity"
                      min-width="160"
                    >
                    </el-table-column>
                    <el-table-column
                      label="供应商"
                      prop="supplierName"
                      :show-overflow-tooltip="true"
                      min-width="160"
                    />
                    <el-table-column
                      label="生产厂商"
                      prop="manufactureName"
                      :show-overflow-tooltip="true"
                      min-width="160"
                    />
                    <el-table-column
                      v-if="
                        route.name === 'OutorderAudit' && pageType === 'detail'
                      "
                      label="出库人"
                      prop="deliverBy"
                      min-width="160"
                    >
                    </el-table-column>
                    <el-table-column
                      v-if="
                        route.name === 'OutorderAudit' && pageType === 'detail'
                      "
                      label="出库部门"
                      prop="deptName"
                      min-width="160"
                    >
                    </el-table-column>
                    <el-table-column
                      v-if="
                        route.name === 'OutorderAudit' && pageType === 'detail'
                      "
                      label="出库日期"
                      prop="deliverTime"
                      min-width="160"
                    >
                    </el-table-column>
                  </el-table>
                </div>
              </el-collapse-item>
            </div>
            <div v-else>
              <!-- 基础信息 -->
              <el-collapse-item name="1" v-if="!dtlShow" class="transform-down">
                <template #title>
                  <span class="circle"></span>
                  <span class="collapse-title"
                    >{{
                      pageType !== "detail"
                        ? pageType === "add"
                          ? "新增"
                          : "编辑"
                        : ""
                    }}出库信息</span
                  >
                </template>
                <div class="request-info">
                  <!--          :disabled="pageType === 'detail'" -->
                  <el-form
                    :model="outboundForm"
                    ref="requestmaterialFormRef"
                    :rules="queryRules"
                    label-width="100px"
                    v-enterToNext
                  >
                    <el-row>
                      <el-col :span="6">
                        <el-form-item label="出库人：">
                          <el-input
                            disabled
                            v-model="applicantIdName"
                            placeholder="自动获取"
                            clearable
                            style="width: 100%"
                            class="search-input"
                          />
                        </el-form-item>
                      </el-col>

                      <el-col :span="6">
                        <el-form-item label="出库部门：" label-width="120px">
                          <el-input
                            disabled
                            style="width: 100%"
                            v-model="applicantIdDeptName"
                            placeholder="自动获取"
                            clearable
                            class="search-input"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="6">
                        <el-form-item label="出库日期：" prop="deliveryDate">
                          <el-date-picker
                            v-model="outboundForm.deliveryDate"
                            format="YYYY/MM/DD HH:mm:ss"
                            style="width: 100%"
                            class="search-input"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            type="datetime"
                            placeholder="请选择出库日期"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="6">
                        <el-form-item
                          label="本次出库数量："
                          label-width="120px"
                        >
                          <el-input
                            disabled
                            style="width: 100%"
                            v-model="outboundForm.nowQuantity"
                            placeholder="自动获取"
                            clearable
                            class="search-input"
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="备注：">
                          <el-input
                            maxlength="2000"
                            style="width: 100%"
                            v-model="outboundForm.remarks"
                            placeholder=""
                            type="textarea"
                            clearable
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
              </el-collapse-item>

              <!-- 物料信息 -->
              <el-collapse-item
                name="3"
                style="position: relative"
                :class="!dtlShow ? 'transform-down' : ''"
              >
                <template #title>
                  <span class="circle"></span>
                  <span class="collapse-title">物料列表</span>
                  <div class="nofixed-search-button button-position">
                    <el-button
                      class="btn submit"
                      @click.stop="handleMaterial"
                      v-if="pageType !== 'detail'"
                      ><el-icon class="icon" color="#fff"> <Plus /> </el-icon
                      >选择物料</el-button
                    >
                    <el-button
                      class="btn direction"
                      @click.stop="outboundcheck"
                      v-if="pageType !== 'detail'"
                      ><el-icon class="icon" color="#fff"> <Back /> </el-icon
                      >关闭</el-button
                    >
                  </div>
                </template>
                <div class="contact-info">
                  <!-- 表格数据 -->
                  <el-table
                    :data="checkMaterialList"
                    border
                    :height="'320px'"
                    :header-cell-style="{ 'text-align': 'center' }"
                  >
                    <el-table-column
                      label="序号"
                      type="index"
                      :show-overflow-tooltip="true"
                      min-width="60"
                    />
                    <el-table-column
                      label="物料编号1"
                      prop="materialCode"
                      :show-overflow-tooltip="true"
                      min-width="160"
                    >
                      <template #default="{ row }">
                        <span>{{
                          row.materialCode ? row.materialCode : "--"
                        }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="物料名称"
                      prop="materialName"
                      :show-overflow-tooltip="true"
                      min-width="160"
                    />
                    <el-table-column
                      label="出厂型号"
                      prop="factoryCode"
                      :show-overflow-tooltip="true"
                      min-width="160"
                    />
                    <el-table-column
                      label="技术参数"
                      prop="technologyParameter"
                      :show-overflow-tooltip="true"
                      min-width="160"
                    />
                    <el-table-column
                      label="单位"
                      prop="materialUnit"
                      :show-overflow-tooltip="true"
                      min-width="80"
                    />
                    <el-table-column
                      label="出库数量"
                      prop="quantity"
                      min-width="140"
                    >
                    </el-table-column>
                    <el-table-column
                      label="供应商"
                      prop="supplierName"
                      :show-overflow-tooltip="true"
                      min-width="140"
                    />
                    <el-table-column
                      label="生产厂商"
                      prop="manufactureName"
                      :show-overflow-tooltip="true"
                      min-width="140"
                    />
                    <el-table-column
                      label="主设备物资序列号"
                      prop="materialNumber"
                      :show-overflow-tooltip="true"
                      min-width="160"
                    />
                    <el-table-column
                      v-if="outboundForm.importantDevice == 1"
                      label="生产厂家序列号（主设备）"
                      min-width="200"
                    >
                      <template #default="{ row, $index }">
                        <!--        v-if="row.importantDevice == 1" -->
                        <el-input
                          v-model="row.serialNumber"
                          clearable
                        ></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-collapse-item>
            </div>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="审批进度" name="approval">
          <template v-if="auditList.length">
            <div class="contact-info" id="print-iframe">
              <!-- 步骤栏 -->
              <div :class="!printFlag ? 'steps-box' : 'steps-print-box '">
                <el-steps
                  :class="flowInfoList.length > 7 ? 'BigSteps' : 'SmallSteps'"
                  :active="flowingStep"
                  finish-status="success"
                >
                  <el-step v-for="(item, index) in flowInfoList" :key="index">
                    <template #title>
                      <span :title="item.name">
                        {{ item.name }}
                      </span>
                    </template>
                    <template #description>
                      <div>
                        <p class="ription">{{ item.auditDate }}</p>
                        <p class="ription">{{ item.auditEmp }}</p>
                      </div>
                    </template>
                  </el-step>
                </el-steps>
              </div>
              <!-- 表格数据 -->
              <el-table
                :data="auditList"
                border
                :height="'100%'"
                :header-cell-style="{ 'text-align': 'center' }"
                sum-text=""
              >
                <!-- 操作模式 -->
                <el-table-column label="流程节点" prop="name" min-width="120">
                </el-table-column>
                <el-table-column
                  label="审核人"
                  prop="createUserName"
                  min-width="120"
                >
                </el-table-column>
                <el-table-column
                  label="审核时间"
                  prop="createTime"
                  min-width="120"
                >
                </el-table-column>
                <el-table-column
                  label="审核意见"
                  prop="resultName"
                  min-width="120"
                >
                </el-table-column>
                <el-table-column label="审核备注" prop="remark" min-width="120">
                </el-table-column>
              </el-table>
            </div>
            <!-- 评论 -->
            <el-table
              style="margin-top: 60px"
              :data="evaluateList"
              border
              :height="'100%'"
              :header-cell-style="{ 'text-align': 'center' }"
              sum-text=""
            >
              <!-- 操作模式 -->
              <el-table-column label="评论内容" prop="content" min-width="500">
              </el-table-column>
              <el-table-column
                label="评论人"
                prop="createUserName"
                min-width="120"
              >
              </el-table-column>
              <el-table-column
                label="评论时间"
                prop="createTime"
                min-width="120"
              >
              </el-table-column>
            </el-table>
          </template>
          <div v-else>暂无审核</div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- <SelectionMaterial
      ref="selectionMaterialRef"
      v-if="selectionMaterialShow"
      v-model:selectionMaterialShow="selectionMaterialShow"
      @submitChoose="handleSelectMaterial"
    /> -->
    <SelectionInventoryMaterial
      v-if="selectionInventoryMaterialShow"
      v-model:selectionInventoryMaterialShow="selectionInventoryMaterialShow"
      @submitChoose="handleSelecInventorytMaterial"
      @selectionInventory="selectionInventoryStatus"
      :materialNameStatus="materialNameStatus"
      :materialCode="materialCode"
      :checkMaterialList="checkMaterialList"
    />
    <el-dialog
      v-model="dialogVisible"
      title="主设备序列号"
      width="36%"
      :close-on-click-modal="false"
    >
      <QrCodeInfo :qrcodeData="qrcodeData" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      :title="title"
      v-model="auditDialogShow"
      width="600px"
      append-to-body
    >
      <el-form-item label="审核备注：" label-width="90">
        <el-input
          style="width: 100%"
          v-model="auditRemark"
          placeholder=""
          type="textarea"
          maxlength="2000"
          clearable
        />
      </el-form-item>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            style="color: #fff; background-color: rgba(67, 207, 124, 1)"
            v-if="auditResult == 5"
            @click="saveCheck()"
            v-loading="loadingCheck"
            >同意</el-button
          >
          <el-button
            style="color: #fff; background-color: rgba(245, 108, 108, 1)"
            v-if="auditResult == 2"
            @click="saveCheck()"
            v-loading="loadingCheck"
            >拒绝</el-button
          >
          <el-button
            style="color: #fff; background-color: rgba(245, 108, 108, 1)"
            v-if="auditResult == 4"
            @click="saveCheck()"
            v-loading="loadingCheck"
            >驳回</el-button
          >
          <el-button style="background-color: #fff" @click="closeAudit()"
            >取消</el-button
          >
        </div>
      </template>
    </el-dialog>
    <el-dialog
      :title="''"
      v-model="evaluateDialogShow"
      width="600px"
      append-to-body
    >
      <el-form-item label="评论内容：" label-width="90">
        <el-input
          style="width: 100%"
          v-model="evaluateInfo"
          placeholder=""
          type="textarea"
          rows="5"
          maxlength="500"
          clearable
        />
      </el-form-item>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            style="color: #fff; background-color: rgba(67, 207, 124, 1)"
            @click="saveEvaluate()"
            >保存</el-button
          >

          <el-button style="background-color: #fff" @click="closeEvaluate()"
            >取 消</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import SelectionMaterial from "./selectionMaterial";
import SelectionInventoryMaterial from "./selectionInventoryMaterial";
// import Upload from "@/components/Upload/index";
import Upload from "@/components/Upload/index";
import QrCodeInfo from "@/components/qrCode/index";
import { addEvaluateApi, getEvaluateListApi } from "@/api/pub.js";
import { getUserListApi } from "@/api/information/customer";
import { getProjectListApi } from "@/api/sales/project";
import { getRequestListApi } from "@/api/purchase/request";
import {
  getDeliveryApplyApi,
  findMaterialList,
  checkDeliveryApi,
  updateDeliveryOfCargo,
  selectMaterialDetailsList,
  getUserInfo,
  selectAuditList,
  selectInventoryList,
} from "@/api/stock/outorder";
import { getDictsApi } from "@/api/dict";
import { ElMessage, ElMessageBox } from "element-plus";
import dayjs from "dayjs";
const route = useRoute();
const emit = defineEmits([
  // 客户新增组件显隐
  "dtlShow",
  // 更新客户新增组件显隐
  "update:dtlShow",
  // 刷新父组件表格数据
  "refreshList",
]);
const props = defineProps({
  // 操作类型
  pageType: {
    type: String,
    default: "add",
  },
});
// 详情加载效果
const detailInfoShow = ref(false);
const activeName = ref("info");
// 折叠栏默认展开
const activeNames = ref(["1", "2", "3"]);
// 客户表单引用
const requestFormRef = ref();
//出库审核表单
// const formRefs = ref();
//编辑出库信息引用
const requestmaterialFormRef = ref();
// 新增联系人表单显隐
const dtlShow = ref(false);
// 选择物料显隐
// const selectionMaterialShow = ref(false);
// 选择库存物料显隐
const selectionInventoryMaterialShow = ref(false);

const loadingCheck = ref(false);

// 选择审核
const auditDialogShow = ref(false);
//控制查看二维码弹窗
const dialogVisible = ref(false);
//主设备物资序列号数据
const qrcodeData = ref([]);
// 出库类型列表
const outStatusList = ref([]);
//用途类型
const deliveryStatusList = ref([]);
// 项目列表
const projectList = ref([]);
// 请购单列表
const requestList = ref([]);

//出库审核物料数据
const checkMaterialList = ref([]);
// 出库表单数据模板
const requestFormTemplate = {
  deliveryApplyCode: "", //出库编号
  applicantDate: "", // 申请日期
  latestDeliverDate: "", //最晚申请日期
  applicantId: null, // 申请人id
  deliveryType: null, // 出库类型
  deliveryUsageType: null, //用途类型
  deptName: "", // 申请部门
  projectId: null, // 关联项目id
  projectName: "",
  purchaseApplyId: null, //关联请购单id
  requestName: "",
  remarks: "", //备注
  consignee: "", //收货人
  phone: "", //手机号码
  deliveryAddress: "", //收货地址
  fileList: [], //文件数据
  deliveryRelationMaterialList: [], //物料数据
};

//审核进度数据
const flowInfoList = ref([]);
//当前进度
const flowingStep = ref(0);
//出库人
const applicantIdName = ref("");
//出库人ID
const outuserId = ref(null);
//出库部门
const applicantIdDeptName = ref("");
//
const outboundForm = reactive({
  nowQuantity: null, //本次出库数量
  deliveryDate: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"), //出库日期
  remarks: "", //备注
});

// 评论
const evaluateDialogShow = ref(false);
// 评论内容
const evaluateInfo = ref("");
// 评论列表
const evaluateList = ref([]);
// 联系人表单数据模板

const data = reactive({
  // 客户表单
  requestForm: JSON.parse(JSON.stringify(requestFormTemplate)),
  // 客户表单校验规则
  queryRules: {
    deliveryDate: [
      { required: true, message: "请选择出库日期", trigger: "change" },
    ],
    //生成厂家序列号（主设备）校验
    // manufacturerRules: {
    //   serialNumber: [
    //     {
    //       required: true,
    //       message: "请输入生成厂家序列号（主设备）",
    //       trigger: "change",
    //     },
    //   ],
    // },
  },
  // 用户列表
  userList: [],
  auditRemark: "",
  auditResult: "",
  applyId: "",
});

const {
  requestForm,
  contactForm,
  queryRules,
  manufacturerRules,
  userList,
  auditRemark,
  auditResult,
  applyId,
} = toRefs(data);

import print from "vue3-print-nb";

// 使用自定义指令
const vPrint = print;
const printFlag = ref(false);

let prints = {
  id: "print-iframe",
  popTitle: "配置页眉标题", // 打印配置页上方的标题
  extraHead: "", // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  previewTitle: "预览的标题", // 打印预览的标题
  previewPrintBtnLabel: "预览结束，开始打印", // 打印预览的标题下方的按钮文本，点击可进入打印
  zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
  previewBeforeOpenCallback() {
    console.log("正在加载预览窗口！");
  }, // 预览窗口打开之前的callback
  previewOpenCallback() {
    console.log("已经加载完预览窗口，预览打开了！");
  }, // 预览窗口打开时的callback
  // 开始打印之前的callback
  beforeOpenCallback() {
    console.log("开始打印之前！");
  },
  openCallback() {
    console.log("执行打印了！");
  }, // 调用打印时的callback
  closeCallback() {
    console.log("关闭了打印工具！");
    printFlag.value = false;
  }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted() {
    console.log("点击v-print绑定的按钮了！");
  },
  standard: "",
  extarCss: "",
};

const handlePrint = () => {
  printFlag.value = true;
};

// 处理评论按钮点击
const handleEvaluate = () => {
  evaluateDialogShow.value = true;
};

// 保存评论
const saveEvaluate = async () => {
  if (!evaluateInfo.value) return ElMessage.info("请输入评论内容！");
  const data = {
    businessId: requestForm.value.deliveryApplyId,
    content: evaluateInfo.value,
    modelType: 9,
  };
  const result = await addEvaluateApi(data);
  if (result.code === 200) {
    ElMessage.success(result.msg);
    evaluateDialogShow.value = false;
    evaluateInfo.value = "";
    getEvaluateList();
  }
};

// 关闭评论弹窗
const closeEvaluate = () => {
  evaluateDialogShow.value = false;
  evaluateInfo.value = "";
};

// 获取评价列表
const getEvaluateList = async () => {
  const data = {
    businessId: requestForm.value.deliveryApplyId,
    modelType: 9,
  };
  const result = await getEvaluateListApi(data);
  evaluateList.value = result.data || [];
};

const handleCheckBtn2 = (requestFormRef, type, title) => {
  auditRemark.value = "";
  if (type == 5) {
    auditRemark.value = "同意";
  }

  auditResult.value = type;
  (applyId.value = requestForm.value.deliveryApplyId),
    (auditDialogShow.value = true);
  loadingCheck.value = false;
};

const saveCheck = async () => {
  if (auditRemark.value === null || auditRemark.value === "") {
    ElMessage.error("审核备注不能为空");
    return;
  }

  const obj = {
    approvalStatus: auditResult.value,
    deliveryApplyId: applyId.value,
    auditRemark: auditRemark.value,
  };
  try {
    loadingCheck.value = true;
    const res = await checkDeliveryApi(obj);
    auditDialogShow.value = false;
    if (res.code === 200) {
      ElMessage.success(res.msg);
      // contractForm.value = JSON.parse(JSON.stringify(contractFormTemplate));
    } else {
      ElMessage.error(res.msg);
    }
    loadingCheck.value = false;
    emit("update:dtlShow", false);
    emit("refreshList", false);
  } catch (error) {
    loadingCheck.value = false;
    emit("update:dtlShow", false);
    emit("refreshList", false);

    // ElMessage.error(error);
  }
};

const closeAudit = () => {
  auditRemark.value = "";
  auditResult.value = "";
  applyId.value = "";
  auditDialogShow.value = false;
};

/**
 * @description: 处理审核状态相关按钮
 * @param {String} type  类型
 * @param {String} title 标题
 */
const handleCheckBtn = (contractFormRef, type, title) => {
  ElMessageBox.confirm(`确定${title}以上数据吗？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    confirmButtonClass: "confirmBtnClass",
    cancelButtonClass: "cancelBtnClass",
  })
    .then(async () => {
      const obj = {
        approvalStatus: type,
        deliveryApplyId: requestForm.value.deliveryApplyId,
      };
      const res = await checkDeliveryApi(obj);
      if (res.code === 200) {
        emit("update:dtlShow", false);
        emit("refreshList", false);
        ElMessage.success(res.msg);
        // contractForm.value = JSON.parse(JSON.stringify(contractFormTemplate));
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch(() => {});
};
const handleScaveBtn = async (requestmaterialFormRef, type, title) => {
  if (!requestmaterialFormRef) return;
  await requestmaterialFormRef.validate(async (valid, fields) => {
    if (valid) {
      let isValid = true;
      checkMaterialList.value.forEach((row) => {
        if (row.importantDevice == 1) {
          if (!validateRow(row)) {
            isValid = false;
          }
        } else {
          isValid = true;
        }
      });
      if (isValid) {
        // 所有输入列校验通过，执行保存操作
        // 在这里执行保存操作
        ElMessageBox.confirm(`确定${title}以上数据吗？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          confirmButtonClass: "confirmBtnClass",
          cancelButtonClass: "cancelBtnClass",
        })
          .then(async () => {
            let checkObj = {
              deliveryApplyId: requestForm.value.deliveryApplyId,
              deliveryRelationId: deliveryRelationId.value,
              userId: outuserId.value,
              deliveryDate: outboundForm.deliveryDate,
              dtos: checkMaterialList.value,
            };
            console.log(checkMaterialList.value);
            const res = await updateDeliveryOfCargo(checkObj);
            if (res.code === 200) {
              emit("update:dtlShow", false);
              emit("refreshList", false);
              ElMessage.success(res.msg);
              // contractForm.value = JSON.parse(JSON.stringify(contractFormTemplate));
            } else {
              ElMessage.error(res.msg);
            }
          })
          .catch(() => {});
      } else {
        // 存在校验未通过的情况，进行异常提示
        ElMessage.error("请输入生成厂家序列号（主设备）");
      }
    }
  });
};
const validateRow = (row) => {
  // 对每一行数据进行校验
  if (row.serialNumber === null || row.serialNumber === "") {
    return false;
  }
  return true;
};
const selectionInventoryStatus = () => {
  selectionInventoryMaterialShow.value = false;
  selectionShow.value = false;
};
/**
 * @description: 处理联系人表格操作
 * @param {String} type 操作类型
 * @param {Object} row  当前行数据
 * @param {Number} tabIndex 表格当前索引
 */
let materialNameStatus = ref("");
let materialCode = ref("");
let outboundStatus = ref(true);
let outboundNumber = ref(null); //本次出库的数量
let deliveryRelationId = ref(null);
const handleOperate = async (type, row, tabIndex) => {
  outboundForm.importantDevice = row.importantDevice;

  const res = await selectInventoryList({
    materialCode: row.materialCode,
    materialName: row.materialName,
  });
  if (res.code == 200) {
    if (res.rows.length > 0) {
      outboundStatus.value = false;

      materialNameStatus.value = row.materialName;

      materialCode.value = row.materialCode;

      outboundNumber.value = row.deliveryQuantity - row.quantity;
      deliveryRelationId.value = row.deliveryRelationId;
      outboundForm.nowQuantity = row.deliveryQuantity - row.quantity;
    } else {
      ElMessage.error("该物料暂无库存");
    }
  }
};

/**
 * @description: 返回
 */
const handleBack = () => {
  emit("update:dtlShow", false);
  emit("refreshList", false);
  requestForm.value = JSON.parse(JSON.stringify(requestFormTemplate));
};
const selectionShow = ref(false);
/**
 * @description: 处理选择物料
 */
const handleMaterial = () => {
  // if (checkStatus == 5 && route.name === "OutorderAudit") {
  //   selectionMaterialShow.value = true;
  // } else {
  selectionInventoryMaterialShow.value = true;
  // }
  selectionShow.value = true;
};

/**
 * @description: 处理物料选择
 */
// const handleSelectMaterial = (value) => {
//   if (value) {
//     selectionMaterialShow.value = false;
//     value.qty = 2;
//     requestForm.value.dtlList.push(JSON.parse(JSON.stringify(value)));
//   } else {
//     ElMessage.info("请选择物料");
//   }
// };
/**
 * @description: 处理库存物料选择
 */
const handleSelecInventorytMaterial = (value) => {
  if (value) {
    selectionInventoryMaterialShow.value = false;
    selectionShow.value = false;
    //-----------------------------------------------------
    //得到所选择的deliveryQuantity 数量总和
    // const sum = value.reduce((total, item) => total + item.quantity, 0);
    // if (sum <= outboundNumber.value) {
    //   const newData = [];
    //   value.forEach((item) => {
    //     if (item.importantDevice === 1) {
    //       for (let i = 0; i < item.quantity; i++) {
    //         const newItem = { ...item };
    //         newItem.deliveryQuantity = 1;
    //         newData.push(newItem);
    //       }
    //     } else {
    //       newData.push(item);
    //     }
    //   });
    //   checkMaterialList.value = newData;
    // } else {
    //   ElMessage.info("请重新选择物料");
    // }
    //-----------------------------------------------------

    let result = [];
    let currentSum = 0;
    //选择的出库数据数量不能超过本次出库的数量
    for (let item of value) {
      const quantity = item.quantity;
      if (currentSum + quantity <= outboundNumber.value) {
        currentSum += quantity;
        result.push(item);
      } else {
        const remainingQuantity = outboundNumber.value - currentSum;
        if (remainingQuantity > 0) {
          item.quantity = remainingQuantity;
          currentSum += remainingQuantity;
          result.push(item);
        }
        break;
      }
    }
    checkMaterialList.value = result;
  } else {
    ElMessage.info("请选择物料");
  }
};
/**
 * @description: 关联项目下拉选择
 */
const handleProjectSelect = (value) => {
  requestForm.value.projectId = value.projectId;
  requestForm.value.projectName = value.projectName;
};

const querySearch = (queryString, cb) => {
  requestForm.value.projectId = null;
  requestForm.value.projectName = "";
  const results = projectList.value;
  cb(results);
};
//---------------------------------------------------------
/**
 * @description: 关联请购单下拉选择
 */
const handleRequestSelect = (value) => {
  requestForm.value.purchaseApplyId = value.purchaseApplyId;
  requestForm.value.requestName = value.purchaseApplyCode;
};

const querySearchRequest = (queryString, cb) => {
  requestForm.value.purchaseApplyId = null;
  requestForm.value.requestName = "";
  const results = requestList.value;
  cb(results);
};
/**
 * @description: 处理人员选择
 * @param {Number} value 选择值
 */
const handleUserChange = (value) => {
  if (value) {
    const selectUser = userList.value.find((item) => item.userId === value);
    if (selectUser) {
      requestForm.value.deptName = selectUser.dept.deptName;
    }
  } else {
    requestForm.value.deptName = "";
  }
};

/**
 * @description: 文件上传成功处理
 * @param {Object} response 文件信息
 */
// function uploadSuccess(response) {
//   requestForm.value.fileList.push({ ...response, businessType: 6 });
// }

/**
 * @description: 删除文件
 * @param {Number} index 当前文件索引
 */
// function uploadRemove(index) {
//   requestForm.value.fileList.splice(index, 1);
// }

/**
 * @description: 处理合计
 */
const getSummaries = (param) => {
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = "合计";
      return;
    }
    const values = data.map((item) => Number(item[column.property]));
    // 只对amount这一列进行总计核算。
    if (
      column.property === "deliveryQuantity" ||
      column.property === "quantity"
    ) {
      if (!values.every((value) => isNaN(value))) {
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0);
        // sums[index] = sums[index].toFixed(2); // 保留2位小数，解决小数列合计精度缺失的问题
        // sums[index] += "元";
      } else {
        sums[index] = "";
      }
    }
  });

  return sums;
};

/**
 * @description: 处理详情信息
 * @param {Number} id
 * @param checkStatus  (0-待审核,1-审核中,2-未通过,3-已撤销,4-已驳回,5-已通过,6-未提交)
 */
let checkStatus = ref(null);
// let detailMaterialList = ref([]);
let auditList = ref([]);

let outorderDtlId = ref(null);
const handleDetailInfo = async (id, row) => {
  try {
    outorderDtlId.value = id;
    checkStatus.value = row.approvalStatus;
    detailInfoShow.value = true;
    const res = await getDeliveryApplyApi(id);

    res.data.fileList.forEach((file) => {
      file.name = file.fileName;
      // delete file.fileName; //是否删除原文件名
    });
    const resTable = await findMaterialList({
      deliveryApplyId: id,
      checkStatus: props.pageType === "check" ? null : row.approvalStatus,
    });
    if (res && resTable) {
      requestForm.value = {
        ...res.data,
        requestName: res.data.purchaseApplyCode,
        deliveryRelationMaterialList: resTable.data,
      };
    }
    getEvaluateList();
    console.log(res.data);
    console.log("gg", requestForm.value);
    console.log(requestForm.value.fileList);
    detailInfoShow.value = false;
    // if (route.name === "OutorderAudit" && props.pageType === "detail") {
    //   const resdetail = await selectMaterialDetailsList(id);
    //   detailMaterialList.value = resdetail.data;
    // }

    const resAudit = await selectAuditList(id);
    auditList.value = resAudit.data;

    if (resAudit.data.length) {
      flowInfoList.value = resAudit.data[0].chartVo.flowList;
      flowingStep.value = resAudit.data[0].chartVo.flowingStep;
    }
  } catch (error) {
    detailInfoShow.value = false;
  }
};
/**
 * @description: 刷新出库数据  暂时保留
 */
const outboundcheck = async () => {
  outboundStatus.value = true;
  const resTable = await findMaterialList({
    deliveryApplyId: outorderDtlId.value,
  });
  requestForm.value.deliveryRelationMaterialList = resTable.data;
  checkMaterialList.value = [];
};
/**
 * @description: 获取字典
 */
async function getDicts() {
  //出库类型
  await getDictsApi("erp_delivery_type").then((res) => {
    if (res.code === 200) {
      outStatusList.value = res.data;
    }
  });
  // 用途类型
  await getDictsApi("erp_delivery_usage_type").then((res) => {
    if (res.code === 200) {
      deliveryStatusList.value = res.data;
    }
  });

  // 项目列表
  await getProjectListApi({}, {}).then((res) => {
    if (res.code === 200) {
      projectList.value = res.rows;
    }
  });
  //关联请购单
  await getRequestListApi({}, {}).then((res) => {
    if (res.code === 200) {
      requestList.value = res.rows;
    }
  });
  //申请人列表
  await getUserListApi({}).then((res) => {
    if (res.length > 0) {
      userList.value = res;
    }
  });
}
/**
 * @description: 获取当前登录的用户信息
 */
const getLoginUserInfo = async () => {
  await getUserInfo({}).then((res) => {
    if (res.code == 200) {
      applicantIdName.value = res.user.nickName;
      outuserId.value = res.user.userId;
      applicantIdDeptName.value = res.user.dept.deptName;
    }
  });
};
/**
 * @description: 查看主设备物资序列号
 */
const handleQrcode = async (row) => {
  // qrcodeData.value = [];
  // dialogVisible.value = true;
  // qrcodeData.value.push({
  //   materialNumber: row.materialNumber,
  // });
  if (requestForm.value.deliveryRelationMaterialList.length > 0) {
    qrcodeData.value = [];

    requestForm.value.deliveryRelationMaterialList.forEach((item) => {
      if (item.materialNumber)
        qrcodeData.value.push({
          materialNumber: item.materialNumber,
        });
    });
    if (qrcodeData.value.length > 0) {
      dialogVisible.value = true;
    } else {
      ElMessage.error("暂无数据");
    }
  }
};
onMounted(() => {
  getDicts();
  getLoginUserInfo();
});

defineExpose({
  handleDetailInfo,
});
</script>
<style lang="scss" scoped>
.requestAdd {
  padding: 20px 20px;
  width: 100%;
  height: 100%;
  .request-info {
    padding: 20px 20px 5px 20px;
    background-color: #f0f0f0;
    margin: 10px 0;
  }
  .contact-info {
    padding-top: 20px;
    .ription {
      color: #8f8f8f;
      line-height: 16px;
      font-size: 12px;
    }
    :deep(.el-step__head.is-success) {
      color: #3399ff;
      border-color: #3399ff;
      position: relative;
    }
    :deep(.el-step__title) {
      font-size: 16px;
      line-height: 38px;
      position: absolute;
      top: -38px;
      width: 140px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    :deep(.el-step__title.is-success) {
      color: #3399ff;
    }
    .table-operate {
      cursor: pointer;
      .el-button {
        height: 28px;
      }
    }
  }

  :deep(.el-table) {
    th.el-table__cell {
      background: #f8f8f8 !important;
    }
  }
  :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
    width: 268px !important;
    height: 34px !important;
  }
  .search-input {
    width: 268px;
    height: 34px;
  }
  .image-content {
    width: 100%;
    line-height: 0px;
    overflow: auto;
  }
}
.auto-top {
  width: 100%;
  position: absolute;
  top: 0px;
  display: flex;
  font-weight: bold;
}
.auto-item {
  width: 125px;
  text-align: center;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
}
.el-autocomplete .el-autocomplete-suggestion {
  max-height: 200px; /* 设置最大高度 */
  overflow-y: auto; /* 超出高度时显示滚动条 */
}

.el-table {
  border: var(--el-table-border);
}
</style>
